<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>3D转换效果</title>
    
     <!--
     	1，perspective:是决定3D变换效果的强度，就是Z轴离平面的距离；值越大，效果就越强烈；
    	2，perspective-origin：x-axis y-axis；定义视图在X轴和Y轴的位置，其子元素会获得透视效果，而不是元素本身；
     -->
     
<style type="text/css">
	
	/*perspective值的应用*/
	/*.div1{
		width:400px;
		height:400px;
		border: 5px solid #000;
		perspective: 500px;
		perspective-origin:right top;
	}
	.box{
		width:200px;
		height:200px;
		background:red;
		transition: 3s;
		margin: auto;
		transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
	}
	.div1:hover .box{
		transform: rotateX(90deg);
		-webkit-transform: rotateX(90deg);
	}*/
	
	/*建立3D空间*/
	/*body{
		perspective: 200px;
	}
		.div1{
				width:400px;
				height:400px;
				border:5px solid #000;
				display: flex;
				transform-style: preserve-3d;
				transform: rotateX(60deg);
				margin:300px;
			}
			.box{
				width:200px;
				height:200px;
				background:red;
				margin:auto;
				transition: 3s;
				transform: translateZ(0px);
			}
			.div1:hover .box{
				transform:translateZ(200px);
			}*/
			
			ul,li{
				list-style:none;
				margin:0;
				padding:0;
			}
			.box{
				width:800px;
				height:800px;
				border:5px solid #000;
				display: flex;
				perspective: 1000px;
			}
			ul{
				width:254px;
				height:254px;
				background:red;
				margin: auto;
				position: relative;
				transform-style: preserve-3d;
				transition: 3s;
				transform-origin: center center -127px;
			}
			li{
				width:254px;
				height:254px;
				font-size:100px;
				text-align: center;
				line-height:254px;
				position: absolute;
				background:url(bg.jpg) no-repeat;
			}
			.box li:nth-of-type(1){
				background-position:-508px -508px;
				left: 0;
				top:-254px;
				transform-origin: bottom;
				transform: rotateX(90deg);
			}
			.box li:nth-of-type(2){
				background-position:0px -254px;
				top: 0;
				left:-254px;
				transform-origin: right;
				transform: rotateY(-90deg);
			}
			.box li:nth-of-type(3){
				background-position:-254px -254px;
				top: 0px;
				left:0px;
				transform:translateZ(-254px) rotateX(180deg);
			}
			.box li:nth-of-type(4){
				left:254px;
				top:0px;
				background-position: -508px -254px;
				transform: rotateY(90deg);
				transform-origin: left;
			}
			.box li:nth-of-type(5){
				left:0;
				top:254px;
				background-position:-762px -254px;
				transform: rotateX(-90deg);
				transform-origin: top;
			}
			.box li:nth-of-type(6){
				left:0;
				top:0;
				background-position: -508px 0px;
			}
			.box:hover ul{
				transform: rotateX(450deg) rotateY(450deg);
			}
			

</style>

</head>
<body>
	
	<!--<div class="div1">
		<div class="box"></div>
	</div>-->
	
	
	<div class="box">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
		</div>
</body>
</html>